<template>
  <div class="bg-green-200 p-4">
    <Header />
    <LinkPanel></LinkPanel>
    <div><%location:product.title%></div>
    <div class="mydivs" style="background-color: red;">
      <ul>
        <li v-for="(item, i) in items" :key="'item_'+i">
          <span>{{ item.productName }}</span>
          <span>{{ item.productSku }}</span>
          <span>{{ item.productPrice }}</span>
        </li>
      </ul> 
    </div>
  </div> 
</template>  
 
 <script>
  import LinkPanel from './linkGround.vue'
  import Header from "./header.vue"
  export default { 
    name: 'AnotherComponent',
    components:{
      LinkPanel,Header
    },
    data(){
      return { 
        title: {
          productListTitle: '<%location:product.name%>'
        },
        items: _WPCC_GET_DATAS('array:product.all.list()') 
      }
    }, 
    props: {
      message: {
        type: String,
        default: 'Hello!, -- Worldddddfdsadfd!'
      }
    }
  }
</script>
  
  <style scoped>
    @tailwind base;
    @tailwind components;
    @tailwind utilities;
    
    .another-component {  
      color: white;
      background:red; 
    } 

  </style>